<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
<div id="app">
        <input type="text" @input="handleSearch" v-model="keyWord" > <button @click="handleSearch">查询</button><button @click="handleAdd">增加</button>
        <div class="content" v-if="dataList.length">
         <ul>
        
         <li v-for="(item,index) in dataList"> 
            {{item}}
         </li>
        
         </ul>
        </div>
        
        <div class="content" v-else>你还没有数据</div>
</div>

</body>
<script>
   var vm=new Vue({
     el:"#app",
     data:{
     dataList:[],
     keyWord:"",
     searchList:[]

     },
     methods:{
        handleAdd(){
         this.dataList=["你好呀","大家好","不错哦","你不错呀"];
         this.searchList=["你好呀","大家好","不错哦","你不错呀"];
         this.dataList.length;
        },
        handleSearch(){
                console.log(this.keyWord);
                this.dataList=this.searchList.filter((item)=>item.indexOf(this.keyWord)>-1);
        }
 
     }
    


   });

</script>

</html>